<template>
	<view :style="[{paddingTop:CustomBar+'px'}]">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">发表评论</block>
		</cu-custom>
		<view class="text-img">
			<textarea placeholder="小主,写点什么吧..." placeholder-class="place" v-model="evText" maxlength="200"></textarea>
			<view class="un-img">
				<view class="" v-for="(item,index) in imgs" :key="index">
					<image :src="item" mode="aspectFill"></image>
					<image class="del" :data-index="index" @click="del" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/del-eve.png"
					 mode=""></image>
				</view>
				<view class="adds" @click="imageShopsUp" v-if="imgs.length<4">
					<image class="add" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/add-eve1.png" mode=""></image>
					<text>添加图片</text>
				</view>
			</view>
		</view>

		<view class="rate">
			<view class="te">
				评分
			</view>
			<view class="align" v-if="from==''">
				<view class="">
					商品评分
				</view>
				<tui-rate :current="piceNums" @change="getPice" normal="#ccc"></tui-rate>
				<view class="">
					{{piceNumsText}}
				</view>
			</view>
			<view class="align">
				<view class="">
					商家评分
				</view>
				<tui-rate :current="attitu" @change="getAttitu" normal="#ccc"></tui-rate>
				<view class="">
					{{attituText}}
				</view>
			</view>
		</view>

		<view class="btn" @click="from==''?submit():offSubmit()">
			提交评价
		</view>
	</view>
</template>

<script>
	var uploadImage = require('@/utils/updateFile/uploadFile.js');
	var util = require('@/utils/formatDate.js');
	import tuiRate from "@/components/thorUI/rate"
	export default {
		components: {
			tuiRate
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				id: '',
				evText: '',
				imgs: [],
				upImgShopsFileName: [],
				attitu: 0,
				piceNums: 0,

				attituText: '',
				piceNumsText: '',
				shopId:'',
				orderId:'',
				
				// 线下
				offOrderId:'',
				offShopId:'',
				from:''
			}
		},
		onLoad(options) {
			this.from = options.from?options.from:''
			if(options.from){
				this.offOrderId = options.orderId
				this.offShopId = options.shopId
			}else{
				this.id = options.id
				this.shopId = options.shopId
				this.orderId = options.orderId
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ffffff'
			})
		},
		methods: {
			getPice(e) {
				this.piceNums = e.index
				switch (e.index) {
					case 1:
						this.piceNumsText = '非常差'
						break
					case 2:
						this.piceNumsText = '差'
						break
					case 3:
						this.piceNumsText = '一般'
						break
					case 4:
						this.piceNumsText = '好'
						break
					case 5:
						this.piceNumsText = '非常好'
						break
				}
			},
			getAttitu(e) {
				this.attitu = e.index
				switch (e.index) {
					case 1:
						this.attituText = '非常差'
						break
					case 2:
						this.attituText = '差'
						break
					case 3:
						this.attituText = '一般'
						break
					case 4:
						this.attituText = '好'
						break
					case 5:
						this.attituText = '非常好'
						break
				}
			},
			// 删除图片
			del(e) {
				var index = e.currentTarget.dataset.index
				var imgs = this.imgs
				var upImgShopsFileName = this.upImgShopsFileName
				imgs.splice(index, 1)
				upImgShopsFileName.splice(index, 1)
				this.imgs = [...imgs]
				this.upImgShopsFileName = [...upImgShopsFileName]

				console.log(upImgShopsFileName)
			},
			// 上传图片
			imageShopsUp() {
				var that = this;
				uni.chooseImage({
					count: 4, // 默认最多一次选择9张图
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
					success: function(res) {
						var imgResult = res.tempFilePaths
						imgResult.forEach(item => {
							//显示消息提示框
							uni.showLoading({
								title: '上传中',
								mask: true
							})
							//上传图片
							//你的域名下的/cbb文件下的/当前年月日文件下的/图片.png
							//图片路径可自行修改
							var bunldSrc = ''
							if(!that.from){
								bunldSrc = 'evaluate/'
							}else{
								bunldSrc = 'offlineEva/'
							}
							uploadImage(item, bunldSrc,
								function(result) {
									that.imgs.push(result)
									that.upImgShopsFileName.push(bunldSrc + result.split(bunldSrc)[1])
									uni.hideLoading();
									uni.showToast({
										title: '上传成功',
										icon: 'none'
									})
								},
								function(err) {
									uni.hideLoading()
									uni.showToast({
										title: '上传失败',
										icon: 'none'
									})
								}
							)
						})
					}
				})
			},
			offSubmit(){
				var that = this
				if(this.evText==''){
					uni.showToast({
						title:'请发表评价',
						icon:'none'
					})
					return false
				}
				if(this.attitu==0){
					uni.showToast({
						title:'请对商家评分',
						icon:'none'
					})
					return false
				}
				that.$request({
					url: '/OrderAppraises/adds',
					data: {
						shopId: that.offShopId,
						orderId: that.offOrderId,
						serviceScore: that.attitu,
						content: that.evText,
						images: that.upImgShopsFileName.join(','),
					},
					success: res => {
						if (res.data.status == 1) {
							uni.hideLoading()
							uni.showModal({
								content: '评价成功',
								showCancel:false,
								success(res) {
									if(res.confirm){
										uni.setStorageSync('backEvaSuc',that.id)
										uni.navigateBack({
											delta:1 
										});
									}
								}
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			submit() {
				var that = this
				if(this.evText==''){
					uni.showToast({
						title:'请发表评价',
						icon:'none'
					})
					return false
				}
				
				if(this.piceNums==0){
					uni.showToast({
						title:'请对商品评分',
						icon:'none'
					})
					return false
				}
				
				if(this.attitu==0){
					uni.showToast({
						title:'请对商家评分',
						icon:'none'
					})
					return false
				}
				
				that.$request({
					url: '/GoodsAppraises/adds',
					data: {
						shopId: that.shopId,
						orderId: that.orderId,
						goodsId: that.id,
						goodsScore: that.piceNums,
						serviceScore: that.attitu,
						content: that.evText,
						images: that.upImgShopsFileName.join(','),
					},
					success: res => {
						if (res.data.status == 1) {
							uni.hideLoading()
							uni.showModal({
								content: '评价成功',
								showCancel:false,
								success(res) {
									if(res.confirm){
										uni.setStorageSync('backEvaSuc',that.id)
										uni.navigateBack({
											delta:1 
										});
									}
								}
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style scoped>
	.text-img {
		width: 750rpx;
		height: 365rpx;
		background-color: #ffffff;
		padding: 30rpx 24rpx;
		box-sizing: border-box;
	}

	.text-img textarea {
		width: 100%;
		height: 145rpx;
		font-size: 28rpx;
		color: #333;
	}

	.text-img .un-img {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.text-img .un-img>view {
		width: 160rpx;
		height: 160rpx;
		border-radius: 8rpx;
		margin-right: 25rpx;
		position: relative
	}

	.text-img .un-img>view image {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	}

	.text-img .un-img>view .del {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: -18rpx;
		right: -18rpx;
	}

	.text-img .un-img .adds {
		border: solid 1rpx #cdcdcd;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.text-img .un-img .adds image {
		width: 48rpx;
		height: 42rpx;
		margin-bottom: 20rpx;
	}

	.text-img .un-img .adds text {
		font-size: 24rpx;
		letter-spacing: 1rpx;
		color: #999999;
	}

	.rate {
		width: 100%;
		margin-top: 20rpx;
		background: #fff;
		padding: 30rpx 24rpx;
		box-sizing: border-box;
	}

	.rate .te {
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #333333;
	}

	.rate .align {
		width: 100%;
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 60rpx;
	}

	.rate .align>view:nth-child(1) {
		width: 150rpx;
	}

	.rate .align>view:nth-child(2) {
		flex: 1;
	}

	.rate .align>view:nth-child(3) {
		width: 150rpx;
	}

	.btn {
		width: 702rpx;
		height: 98rpx;
		background-color: #f34930;
		border-radius: 8rpx;
		text-align: center;
		line-height: 98rpx;
		position: absolute;
		bottom: 20rpx;
		left: 50%;
		margin-left: -351rpx;
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
		letter-spacing: 1rpx;
	}
</style>
<style>
	.place {
		color: #999999;
	}

	page {
		background: #f5f5f5;
	}
</style>
